<template>
  <div class="p-2">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="user-info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="header-title">个人信息</span>
              <el-tag type="success" effect="dark" v-if="state.user.status === '0'">激活状态</el-tag>
            </div>
          </template>

          <el-row :gutter="20">
            <!-- 头像列 -->
            <el-col :xs="24" :sm="8" class="avatar-column">
              <div class="avatar-wrapper">
                <userAvatar />
                <!--                <div class="user-name">{{ state.user.userName }}</div>-->
                <!--                <div class="user-role">{{ state.roleGroup }}</div>-->
              </div>
            </el-col>

            <!-- 信息列 -->
            <el-col :xs="24" :sm="16">
              <el-descriptions :column="1" border size="large" label-class-name="desc-label" content-class-name="desc-content">
                <el-descriptions-item label="账号" align="center">
                  <div class="info-item">
                    <svg-icon icon-class="user" class="icon-hover" />
                    <el-tag type="success">{{ state.user.userName || '-' }}</el-tag>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="角色" align="center">
                  <div class="info-item">
                    <svg-icon icon-class="peoples" class="icon-hover" />
                    <el-tag v-if="state.roleGroup" type="success" size="small">
                      {{ state.roleGroup || '-' }}
                    </el-tag>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="所属部门" align="center">
                  <div class="info-item">
                    <svg-icon icon-class="tree" class="icon-hover" />
                    <span class="dept-info">
                      <el-tag v-if="state.user.deptName" type="primary" size="small">
                        {{ state.user.deptName }}
                      </el-tag>
                      <el-tag v-if="state.postGroup" type="success" size="small">
                        <span class="post-group">{{ state.postGroup }}</span>
                      </el-tag>
                    </span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="手机号码" align="center">
                  <div class="info-item">
                    <svg-icon icon-class="phone" class="icon-hover" />
                    {{ state.user.phonenumber || '-' }}
                  </div>
                </el-descriptions-item>

                <el-descriptions-item label="电子邮箱" align="center">
                  <div class="info-item">
                    <svg-icon icon-class="email" class="icon-hover" />
                    {{ state.user.email || '-' }}
                  </div>
                </el-descriptions-item>

                <el-descriptions-item label="创建时间" align="center">
                  <div class="info-item">
                    <svg-icon icon-class="date" class="icon-hover" />
                    <el-icon>
                      <clock />
                    </el-icon>
                    {{ state.user.createTime }}
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="user-info-card" shadow="hover">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="userForm" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Profile" lang="ts">
import UserAvatar from './userAvatar.vue';
import UserInfo from './userInfo.vue';
import ResetPwd from './resetPwd.vue';
import OnlineDevice from './onlineDevice.vue';
import { getAuthList } from '@/api/system/social/auth';
import { getUserProfile } from '@/api/system/user';
import { getOnline } from '@/api/monitor/online';
import { UserVO } from '@/api/system/user/types';
import { Clock } from '@element-plus/icons-vue';

const activeTab = ref('userinfo');

interface State {
  user: Partial<UserVO>;
  roleGroup: string;
  postGroup: string;
  auths: any;
  devices: any;
}

const state = ref<State>({
  user: {},
  roleGroup: '',
  postGroup: '',
  auths: [],
  devices: []
});

const userForm = ref({});

const getUser = async () => {
  const res = await getUserProfile();
  state.value.user = res.data.user;
  userForm.value = { ...res.data.user };
  state.value.roleGroup = res.data.roleGroup;
  state.value.postGroup = res.data.postGroup;
};

const getAuths = async () => {
  const res = await getAuthList();
  state.value.auths = res.data;
};
const getOnlines = async () => {
  const res = await getOnline();
  state.value.devices = res.rows;
};

onMounted(() => {
  getUser();
  getAuths();
  getOnlines();
});
</script>
<style scoped>
.user-info-card {
  border-radius: 15px;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(5px);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;

    .header-title {
      font-size: 18px;
      font-weight: 600;
      background: linear-gradient(45deg, #409eff, #79bbff);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  .avatar-column {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    padding: 20px;

    .avatar-wrapper {
      text-align: center;

      .user-name {
        font-size: 18px;
        font-weight: 500;
        color: #00bfff;
        margin: 10px 0;
      }

      .user-role {
        color: #1ab394;
        font-size: 14px;
      }
    }
  }

  .info-item {
    display: flex;
    align-items: center;
    gap: 10px;

    .icon-hover {
      color: var(--el-text-color-secondary);
      transition: color 0.3s;
      font-size: 18px;

      &:hover {
        color: var(--el-color-primary);
      }
    }

    .dept-info {
      display: flex;
      align-items: center;
      gap: 8px;

      .post-group {
        color: var(--el-color-success);
        font-size: 14px;
      }
    }
  }

  :deep(.desc-label) {
    width: 100px;
    font-weight: 500;
    color: var(--el-text-color-primary);
  }

  :deep(.desc-content) {
    padding: 12px;
  }
}
</style>
